<template>
    <view class="container">
        <!-- 登录页面 -->
        <view v-if="currentPage === 'login'" class="card">
            <text class="title">用户登录</text>
            <view class="form-group">
                <text class="form-label">用户名</text>
                <input 
                    v-model="loginForm.username" 
                    class="input-field" 
                    placeholder="请输入用户名"
                    placeholder-class="placeholder-style"
                    @input="onInput"
                />
            </view>
            <view class="form-group">
                <text class="form-label">密码</text>
                <input 
                    v-model="loginForm.password" 
                    class="input-field" 
                    placeholder="请输入密码"
                    password
                    placeholder-class="placeholder-style"
                    @input="onInput"
                />
            </view>
            <button class="btn" @tap="handleLogin">登录</button>
            <view class="divider">或</view>
            <view class="link">
                <text class="link-text" @tap="switchToRegister">没有账号？去注册</text>
            </view>
        </view>
        
        <!-- 注册页面 -->
        <view v-if="currentPage === 'register'" class="card">
            <text class="title">用户注册</text>
            <view class="form-group">
                <text class="form-label">用户名</text>
                <input 
                    v-model="registerForm.username" 
                    class="input-field" 
                    placeholder="请设置用户名"
                    placeholder-class="placeholder-style"
                    @input="onInput"
                />
            </view>
            <view class="form-group">
                <text class="form-label">密码</text>
                <input 
                    v-model="registerForm.password" 
                    class="input-field" 
                    placeholder="请设置密码"
                    password
                    placeholder-class="placeholder-style"
                    @input="onInput"
                />
            </view>
            <view class="form-group">
                <text class="form-label">确认密码</text>
                <input 
                    v-model="registerForm.confirmPassword" 
                    class="input-field" 
                    placeholder="请再次输入密码"
                    password
                    placeholder-class="placeholder-style"
                    @input="onInput"
                />
            </view>
            <button class="btn" @tap="handleRegister">注册</button>
            <view class="divider">或</view>
            <view class="link">
                <text class="link-text" @tap="switchToLogin">已有账号？去登录</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentPage: 'login',
            loginForm: {
                username: '',
                password: ''
            },
            registerForm: {
                username: '',
                password: '',
                confirmPassword: ''
            }
        }
    },
    methods: {
        switchToRegister() {
            this.currentPage = 'register'
        },
        switchToLogin() {
            this.currentPage = 'login'
        },
        
        // 通用的输入处理方法
        onInput(e) {
            // 这个方法只是为了确保输入事件被触发
            console.log('输入事件触发', e)
        },
        
        handleLogin() {
            console.log('登录信息:', this.loginForm)
            
            if (!this.loginForm.username || !this.loginForm.password) {
                uni.showToast({
                    title: '请输入用户名和密码',
                    icon: 'none'
                })
                return
            }
            
            uni.showLoading({
                title: '登录中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '登录成功！',
                    icon: 'success'
                })
                
                // 登录成功后跳转到特定页面
                // 请根据您的实际页面路径修改下面的url
                setTimeout(() => {
                    // 尝试不同的跳转方法
                    this.navigateToTargetPage()
                }, 1000)
            }, 1500)
        },
        
        // 跳转到目标页面的方法
        navigateToTargetPage() {
            // 方法1: 使用 navigateTo 跳转到普通页面
            // 将 '/pages/index/index' 替换为您要跳转的实际页面路径
            uni.navigateTo({
                url: '/pages/tabBar/compenent/compenent',
                success: () => {
                    console.log('跳转成功')
                },
                fail: (err) => {
                    console.log('跳转失败:', err)
                    // 如果 navigateTo 失败，尝试其他方法
                    this.tryAlternativeNavigation()
                }
            })
        },
        
        // 备用跳转方法
        tryAlternativeNavigation() {
            // 方法2: 如果目标页面是 tabBar 页面，使用 switchTab
            uni.switchTab({
                url: '/pages/tabBar/compenent/compenent',
                success: () => {
                    console.log('tabBar页面跳转成功')
                },
                fail: (err) => {
                    console.log('tabBar页面跳转失败:', err)
                    
                    // 方法3: 使用 redirectTo 关闭当前页面并跳转
                    uni.redirectTo({
                        url: '/pages/tabBar/compenent/compenent',
                        success: () => {
                            console.log('redirectTo跳转成功')
                        },
                        fail: (err) => {
                            console.log('所有跳转方法都失败:', err)
                            uni.showToast({
                                title: '跳转失败，请检查页面路径',
                                icon: 'none'
                            })
                        }
                    })
                }
            })
        },
        
        handleRegister() {
            console.log('注册信息:', this.registerForm)
            
            if (!this.registerForm.username || !this.registerForm.password || !this.registerForm.confirmPassword) {
                uni.showToast({
                    title: '请填写所有字段',
                    icon: 'none'
                })
                return
            }
            
            if (this.registerForm.password !== this.registerForm.confirmPassword) {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                })
                return
            }
            
            uni.showLoading({
                title: '注册中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '注册成功！',
                    icon: 'success'
                })
                
                this.currentPage = 'login'
                this.registerForm = {
                    username: '',
                    password: '',
                    confirmPassword: ''
                }
            }, 1500)
        }
    }
}
</script>

<style>
.container {
    background-color: #e8f4fd;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.card {
    background-color: white;
    border-radius: 16px;
    padding: 30px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.input-field {
    width: 95%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    background-color: #fff;
}

.placeholder-style {
    color: #999;
}

.btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}

.divider {
    text-align: center;
    margin: 20px 0;
    color: #888;
    position: relative;
}

.divider::before, .divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: #eee;
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.link {
    text-align: center;
    margin-top: 20px;
}

.link-text {
    color: #4a90e2;
    font-weight: 500;
}

@media (max-width: 480px) {
    .card {
        padding: 20px;
    }
    
    .title {
        font-size: 24px;
    }
}
</style>